Skip to content

test(preact-query-devtools): extract shared test setup into 'beforeEach'#11027

Merged
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-shared-setup
Jul 4, 2026
Merged

test(preact-query-devtools): extract shared test setup into 'beforeEach'#11027
sukvvon merged 2 commits into
mainfrom
test/preact-query-devtools-shared-setup

Conversation

@sukvvon

@sukvvon sukvvon commented Jul 4, 2026

Copy link
Copy Markdown
Member

🎯 Changes

Removes the boilerplate repeated in every test of PreactQueryDevtools and PreactQueryDevtoolsPanel by hoisting the shared setup into beforeEach:

  • The dynamic await import(...) of the component and const queryClient = new QueryClient() were duplicated in each test. They now live in a single beforeEach, exposed via let bindings.
  • Test callbacks that no longer await anything drop their needless async.
  • The production (return null) test keeps its own import('..') after vi.resetModules() and renames the binding to ProductionDevtools/ProductionDevtoolsPanel to avoid shadowing.

No test behavior changes; all existing assertions are preserved.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Tests
    • Expanded and streamlined devtools test coverage to better verify prop handling, default values, rendering behavior, and lifecycle cleanup.
    • Added checks for both prop-based and resolved client usage, plus production-mode behavior.
    • Improved confidence that settings like position, theme, height, and constructor options are passed through correctly.

@nx-cloud

nx-cloud Bot commented Jul 4, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit c4a17f2

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 3m 7s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 5s View ↗

☁️ Nx Cloud last updated this comment at 2026-07-04 06:20:48 UTC

@coderabbitai

coderabbitai Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Two Preact Query Devtools test suites are refactored to use a shared async beforeEach for dynamic component import and QueryClient creation, replacing per-test dynamic imports. Test coverage is expanded for prop defaulting (initialIsOpen, errorTypes, onClose), constructor option forwarding, and production-mode aliasing.

Changes

Preact Devtools Test Refactor

Layer / File(s) Summary
PreactQueryDevtools: shared setup and no-client handling
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Adds typed import and shared async beforeEach importing the component once and creating a reusable QueryClient, updating no-client and context-client tests.
PreactQueryDevtools: prop forwarding and constructor wiring
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Refactors and extends tests for buttonPosition, position, initialIsOpen defaulting, errorTypes defaulting, theme, setClient, and constructor options (styleNonce, shadowDOMTarget, hideDisabledQueries) using shared setup.
PreactQueryDevtools: post-mount updates, unmount, production mode
packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
Converts after-mount setter-call tests and the unmount test to shared setup, and renames the production-mode binding to ProductionDevtools, invoking it directly.
PreactQueryDevtoolsPanel: shared setup and client handling
packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Adds typed import and shared async beforeEach, updates client-provided test and adds onClose/errorTypes forwarding assertions.
PreactQueryDevtoolsPanel: prop defaulting and constructor wiring
packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Adds errorTypes default test and extends coverage for theme, setClient, styleNonce, and hideDisabledQueries forwarding.
PreactQueryDevtoolsPanel: styling, lifecycle, production mode
packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx
Verifies default/overridden container height, unmount lifecycle behavior, and renames the production-mode binding to ProductionDevtoolsPanel.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

  • TanStack/query#10851: Refactors/adds equivalent devtools test cases verifying the same prop-wiring matrix and defaults for React counterparts.
  • TanStack/query#11019: Extends test coverage for post-mount setter calls in a corresponding devtools component.
  • TanStack/query#10852: Refactors the same PreactQueryDevtools/Panel test suites with overlapping prop-forwarding and unmount assertions.

Suggested labels: package: query-devtools

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: moving shared preact-query-devtools test setup into beforeEach.
Description check ✅ Passed The description matches the template and includes changes, checklist, and release impact with the required sections filled out.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch test/preact-query-devtools-shared-setup

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

@pkg-pr-new

pkg-pr-new Bot commented Jul 4, 2026

Copy link
Copy Markdown
More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@11027

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@11027

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@11027

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@11027

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@11027

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@11027

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@11027

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@11027

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@11027

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@11027

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@11027

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@11027

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@11027

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@11027

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@11027

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@11027

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@11027

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@11027

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@11027

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@11027

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@11027

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@11027

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@11027

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@11027

commit: f8062fa

@github-actions

github-actions Bot commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
react full 12.13 KB (0%)
react minimal 9.08 KB (0%)

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx`:
- Around line 70-74: The “default onClose” test in
PreactQueryDevtoolsPanel.test.tsx is too weak because it only checks that
setOnCloseMock received any function, which is identical to the forward-onClose
test. Update the test around PreactQueryDevtoolsPanel and setOnCloseMock to
capture the actual callback passed when onClose is omitted, then assert it
behaves like the component’s default no-op from
devtools.setOnClose(props.onClose ?? (() => {})) and is not the same as a
user-supplied callback. This makes the test verify the fallback logic instead of
just type shape.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0e47e5d5-3ecb-4b7d-bf9a-1b34e0a52cc3

📥 Commits

Reviewing files that changed from the base of the PR and between be8f11b and f8062fa.

📒 Files selected for processing (2)
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx
  • packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx

Comment on lines +70 to 74
it('should default "onClose" to a no-op function when the prop is omitted', () => {
render(<PreactQueryDevtoolsPanel client={queryClient} />)

expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
})

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Default onClose test doesn't verify default behavior.

This assertion (expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))) is identical to the "forward onClose" test at Lines 62-68 and passes regardless of whether the default no-op or a user-supplied function was used. Per the component, devtools.setOnClose(props.onClose ?? (() => {})) Ensures the onClose prop is forwarded and defaults to a function when omitted as intended, but this test can't catch a regression in the ?? defaulting logic since any function satisfies expect.any(Function).

Capture the actual function passed and assert it's callable/distinct from a user-provided one to make this test meaningful:

🧪 Proposed fix to distinguish default from provided onClose
   it('should default "onClose" to a no-op function when the prop is omitted', () => {
     render(<PreactQueryDevtoolsPanel client={queryClient} />)

-    expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
+    const forwarded = setOnCloseMock.mock.calls[0]?.[0]
+    expect(forwarded).toBeInstanceOf(Function)
+    expect(() => forwarded()).not.toThrow()
   })
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
it('should default "onClose" to a no-op function when the prop is omitted', () => {
render(<PreactQueryDevtoolsPanel client={queryClient} />)
expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
})
it('should default "onClose" to a no-op function when the prop is omitted', () => {
render(<PreactQueryDevtoolsPanel client={queryClient} />)
const forwarded = setOnCloseMock.mock.calls[0]?.[0]
expect(forwarded).toBeInstanceOf(Function)
expect(() => forwarded()).not.toThrow()
})
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx`
around lines 70 - 74, The “default onClose” test in
PreactQueryDevtoolsPanel.test.tsx is too weak because it only checks that
setOnCloseMock received any function, which is identical to the forward-onClose
test. Update the test around PreactQueryDevtoolsPanel and setOnCloseMock to
capture the actual callback passed when onClose is omitted, then assert it
behaves like the component’s default no-op from
devtools.setOnClose(props.onClose ?? (() => {})) and is not the same as a
user-supplied callback. This makes the test verify the fallback logic instead of
just type shape.

@sukvvon sukvvon merged commit ee301ad into main Jul 4, 2026
9 checks passed
@sukvvon sukvvon deleted the test/preact-query-devtools-shared-setup branch July 4, 2026 06:29
@sukvvon sukvvon self-assigned this Jul 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant